<template>
	<view>
		<u-navbar backIconColor="#333333" :borderBottom="false" :background="background"></u-navbar>
		<view class="top">
			<image src="../static/e1.png" class="t1"></image>
			<image src="../static/e2.png" class="t2"></image>
		</view>
		<view class="content">
			<view class="title">
				<image src="../static/e3.png" mode=""></image>
				随机再送一件
			</view>
			<view class="cont">
				<u-row gutter="20">
					<u-col :span="4">
						<view class="list2">
							<image src="../static/a1.png" class="up"></image>
							<view class="name">
								<text>8 </text>蜜贝
							</view>
							<button class="number">
								点击领取
							</button>
						</view>
					</u-col>
					<u-col :span="4" v-for="(item,index) in 5" :key="index">
						<view class="list">
							<image src="../static/a1.png" class="up"></image>
							<view class="name">
								NIKE华夫饼
							</view>
							<view class="number">
								<text>¥</text> 799
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="title">
				<image src="../static/e4.png" mode=""></image>
				随机再送一件
			</view>
			<view class="nonetow">
				<view class="up">
					<view class="list" @click="toPage('/pages/htmlA/setting/basic')" style="margin-right: 23rpx;">
						<image src="../../htmlC/static/f1.png" class="icon"></image>
						<view class="con">
							<view class="name">
								头像昵称
							</view>
							<view class="text1" v-if="0==0">
								<view class="t3">
									点击完善
								</view>
							</view>
							<view class="text1" v-else>
								<view class="t1">
									已完善
								</view>
								<view class="t2">
									+0
								</view>
								<view class="t3">
									积分
								</view>
							</view>
						</view>
					</view>
					<view class="list" @click="toPage('/pages/htmlA/setting/collection')">
						<image src="../../htmlC/static/f2.png" class="icon"></image>
						<view class="con">
							<view class="name">
								收款码
							</view>
							<view class="text1" v-if="0==0">
								<view class="t3">
									点击完善
								</view>
							</view>
							<view class="text1" v-else>
								<view class="t1">
									已完善
								</view>
								<view class="t2">
									+0
								</view>
								<view class="t3">
									积分
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="up">
					<view class="list" @click="toPage('/pages/htmlA/address/index')" style="margin-right: 23rpx;">
						<image src="../../htmlC/static/f3.png" class="icon"></image>
						<view class="con">
							<view class="name">
								收货地址
							</view>
							<view class="text1" v-if="0==0">
								<view class="t3">
									点击完善
								</view>
							</view>
							<view class="text1" v-else>
								<view class="t1">
									已完善
								</view>
								<view class="t2">
									+0
								</view>
								<view class="t3">
									积分
								</view>
							</view>
						</view>
					</view>
					<view class="list" @click="toPage('/pages/htmlA/setting/identity','敬请期待')">
						<image src="../../htmlC/static/f5.png" class="icon"></image>
						<view class="con">
							<view class="name">
								抢拍生鲜蜂巢
							</view>
							<view class="text1" v-if="0==0">
								<view class="t3">
									未达成
								</view>
							</view>
							<view class="text1" v-else>
								<view class="t1">
									已完善
								</view>
								<view class="t2">
									+0
								</view>
								<view class="t3">
									积分
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="div"></view>
		<view class="bottom">
			完成所有任务 <text>解锁新人专属好礼</text>
			<button type="default">免费领取</button>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					background: '#FBD745'
				},
			}
		},
		onLoad(option) {
			than = this;
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 1;
		height: 144rpx;
		background: #FFFFFF;
		opacity: 0.9;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		padding: 0 57rpx;
		text {
			color: #FF2D01;
		}

		button {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 180rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: linear-gradient(-90deg, #FB8A3E, #FFA256, #FE3C33);
			border-radius: 20rpx;
		}
	}

	.top {
		background: #FBD745;
		display: flex;
		padding-top: 20rpx;
		padding-bottom: 80rpx;

		.t1 {
			width: 387rpx;
			height: 116rpx;
			margin-left: 50rpx;
		}

		.t2 {
			margin-left: auto;
			margin-right: 10rpx;
			width: 242rpx;
			height: 148rpx;
		}
	}

	page {
		background: #FAFAFA;
	}

	.content {
		margin-top: -30rpx;
		background: #FAFAFA;
		border-radius: 40rpx 40rpx 0px 0px;

		.title {
			padding: 0 36rpx;
			display: flex;
			align-items: center;
			height: 100rpx;

			image {
				width: 65rpx;
				height: 65rpx;
				margin-right: 20rpx;
			}

			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.nonetow {
			.up {
				display: flex;
				align-items: center;
				padding: 0 36rpx;
				margin-bottom: 25rpx;

				.list {
					width: 327rpx;
					height: 155rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					display: flex;
					align-items: center;

					.head {
						margin: 0 20rpx;
						width: 74rpx;
						height: 74rpx;
					}

					.icon {
						margin: 0 20rpx;
						width: 52rpx;
						height: 52rpx;
					}

					.name {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.text {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}

					.text1 {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.t1 {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #3270FF;
						}

						.t2 {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #F46813;
						}

						.t3 {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #F46813;
						}
					}
				}
			}

		}

		.cont {
			padding: 0 36rpx;

			.list {
				height: 210rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				text-align: center;
				margin-bottom: 24rpx;

				.up {
					margin-top: 5rpx;
					width: 120rpx;
					height: 120rpx;
				}

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #39383D;
				}

				.number {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FE7725;
				}
			}

			.list2 {
				height: 210rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				text-align: center;
				margin-bottom: 24rpx;

				.up {
					margin-top: 22rpx;
					width: 75rpx;
					height: 77rpx;
				}

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #39383D;
					margin: 5rpx 0;

					text {
						color: #FF2D01;
						margin-right: 5rpx;
					}
				}

				.number {
					width: 140rpx;
					height: 48rpx;
					background: linear-gradient(-90deg, #FB8A3E, #FFA256, #FE3C33);
					border-radius: 24rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					padding: 0;
					line-height: 48rpx;
				}
			}
		}
	}
</style>
